<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>编辑送货地址</p>
        </header>
        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">
                    联系人：
                </div>
                <div class="content">
                    <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
                </div>
            </li>
            <li>
                <div class="title">
                    性别：
                </div>
                <div class="content" style="font-size: 3vw;">
                    <input type="radio" name="sex" v-model="deliveryAddress.contactSex" value="1" style="width:6vw;height:3.2vw;" checked>男
                    <input type="radio" name="sex" v-model="deliveryAddress.contactSex" value="0" style="width:6vw;height:3.2vw;">女
                </div>
            </li>
            <li>
                <div class="title">
                    电话：
                </div>
                <div class="content">
                    <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
                </div>
            </li>
            <li>
                <div class="title">
                    收货地址：
                </div>
                <div class="content">
                    <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
                </div>
            </li>
        </ul>
        <div class="button-add">
            <button @click="update">更新</button>
        </div>
        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>


<script>
    import Footer from '../components/Footer'
    export default {
        name: 'UpdateUserAddress',
        data() {
            return {
                daId: this.$route.query.daId,
                user: {},
                Address: {},
                deliveryAddress: {
                    daId: '',
                    contactName: '',
                    contactTel: '',
                    address: '',
                    contactSex: 1,
                }
            }
        },
        created() {
            this.user = this.$getSessionStorage('user');
            this.getDeliveryAddressById();
        },
        methods: {
            getDeliveryAddressById(daid) {
                this.$axios.post('DeliveryAddressController/getDeliveryAddressById', this.$qs.stringify({
                    daId: this.daId
                })).then(response => {
                    this.Address = response.data
                    console.log('------------')
                    console.log(response.data)
                    console.log('------------')
                    // if(response.data==1){
                    // 	console.log('更新成功！')
                    // }else {
                    // 	alert('更新失败！');
                    // }
                }).catch(error => {
                    console.log(error);
                })
            },
            update() {
                if (this.deliveryAddress.contactName == '') {
                    this.deliveryAddress.contactName = this.Address.contactName;
                }
                if (this.deliveryAddress.contactTel == '') {
                    this.deliveryAddress.contactTel = this.Address.contactTel;
                }
                if (this.deliveryAddress.address == '') {
                    this.deliveryAddress.address = this.Address.address;
                }
                this.deliveryAddress.daId = this.daId;
                console.log('------------')
                console.log(this.deliveryAddress)
                console.log('------------')
                this.$axios.post('DeliveryAddressController/updateDeliveryAddress', this.$qs.stringify(
                    this.deliveryAddress
                )).then(response => {
                    //返回1表示成功
                    console.log('------------')
                    console.log(response.data)
                    console.log('------------')
                    if (response.data == 1) {
                        console.log('更新成功！')
                        this.$router.go(-1);
                    } else {
                        alert('更新失败！');
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        components: {
            Footer
        }
    }
</script>


<style scoped>
    /*************** 总容器 ***************/
    .wrapper {
        width: 100%;
        height: 100%;
    }
    /*************** header ***************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        font-size: 4.8vw;
        position: fixed;
        left: 0;
        top: 0;
        /*保证在最上层*/
        z-index: 1000;
    }
    /*************** （表单信息） ***************/
    .wrapper .form-box {
        width: 100%;
        margin-top: 12vw;
    }
    .wrapper .form-box li {
        box-sizing: border-box;
        padding: 4vw 3vw 0vw 3vw;
        display: flex;
    }
    .wrapper .form-box li .title {
        flex: 0 0 18vw;
        font-size: 3vw;
        font-weight: 700;
        color: #666;
    }
    .wrapper .form-box li .content {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .wrapper .form-box li .content input {
        border: none;
        outline: none;
        width: 100%;
        height: 4vw;
        font-size: 3vw;
    }
    .wrapper .button-add {
        box-sizing: border-box;
        padding: 4vw 3vw 0vw 3vw;
    }
    .wrapper .button-add button {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        background-color: #38CA73;
    }
    /*************** footer ***************/
    .wrapper .footer {
        width: 100%;
        height: 14vw;
        border-top: solid 1px #DDD;
        position: fixed;
        left: 0;
        bottom: 0;
        /*保证在最上层*/
        z-index: 1000;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .wrapper .footer li {
        /*li本身的尺寸完全由内容撑起*/
        user-select: none;
        cursor: pointer;
        color: #999;
        /*主轴方向设为column，然后每个子元素才能垂直水平都居中*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .wrapper .footer li i {
        font-size: 5vw;
    }
    .wrapper .footer li p {
        font-size: 2.8vw;
    }
</style>